<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>
<form class="layui-form" lay-filter="childForm" id="add_child_form" action="" style="padding:15px 10px;">
<div class="layui-container" style="width: 1030px;">
    <div class="layui-row"  style="margin-top: 20px;">
        <div class="layui-inline">
            <label class="layui-form-label">定班日期：</label>
            <div class="layui-input-inline" style="width: 223px;">
                <input type="text" name="scDate1" class="layui-input" id="scDate1" placeholder="yyyy-MM-dd">
            </div>
            <div class="layui-input-inline" style="margin-left: 26px;width: 223px;">
                <input type="text" class="layui-input" name="scDate2" id="scDate2" placeholder="yyyy-MM-dd">
            </div>
            <button type="button" class="layui-btn" id="scDate" style="margin-left: 34px;">查询</button>
        </div>

    </div>
    <div class="layui-row" style="margin-top: 18px;">
        <div class="layui-col-sm4">
            <input type="hidden" name="Pid">
            <div class="layui-form-item">
                <label class="layui-form-label">姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名：</label>

                <div class="layui-input-block">
                    <select name="pName" id="pNamea" lay-filter="pName">
                        <option value="-1">请选择学生</option>
                    </select>
                </div>
            </div>

            <div class="layui-form-item" id="grade" style="margin-top: 22px;">
                <label class="layui-form-label">年&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;级：</label>
                <div class="layui-input-block" >
                    <select name="gradeId" id="gradeId" required  lay-verify="required" lay-filter="gradeId">
                        <option value="-1">请选择年级</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item" style="margin-top: 22px;">
                <label class="layui-form-label">入园时间：</label>
                <div class="layui-input-block">
                    <input type="text" name="eDate" class="layui-input" id="eDate" placeholder="yyyy-MM-dd">
                </div>
            </div>

            <div class="layui-form-item" style="margin-top: 22px;">
                <label class="layui-form-label">所属园所：</label>
                <div class="layui-input-block" id="fuji">
                    <p> <input type='radio' name='glId' value='1' title='慧智双语幼儿园'></p>
                    <p style="margin-top: 18px;"> <input type='radio' name='glId' value='2' title='北京乐天幼儿园' ></p>
                </div>
            </div>





            <div class="layui-form-item" style="margin-top: 25px">
                   <label class="layui-form-label">是否缴费：</label>
                <div class="layui-input-block">
                    <input type="checkbox" name="pDrop"  lay-skin="switch" lay-text="是|否" checked value="是">
                </div>
            </div>


        </div>
        <div class="layui-col-sm4">

            <div class="layui-form-item">
                <label class="layui-form-label">性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别：</label>
                <div class="layui-input-block">
                    <input type="radio" name="pSex" value="男" title="男" checked>
                    <input type="radio" name="pSex" value="女" title="女">
                </div>
            </div>



            <div class="layui-form-item" id="manage" style="margin-top: 22px;">
                <label class="layui-form-label">班&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;级：</label>
                <div class="layui-input-block">
                    <select name="cmId" id="cmId" lay-filter="manage" required  lay-verify="required">
                        <option value="-1">请选择班级</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item" style="margin-top: 22px;">
                <label class="layui-form-label">联系方式：</label>
                <div class="layui-input-block">
                    <input type="text" name="contact" required  lay-verify="required" placeholder="请输入联系方式" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item" style="margin-top: 22px;">
                <label class="layui-form-label">兴趣爱好：</label>
                <div class="layui-input-block">
                    <p> <input type="checkbox" name="hobby" value="唱歌" title="唱&nbsp; &nbsp;歌">
                        <input type="checkbox" name="hobby" value="看动画" title="看动画">
                    </p>
                    <p style="margin-top: 18px;">
                        <input type="checkbox" name="hobby" value="听故事" title="听故事">
                        <input type="checkbox" name="hobby" value="捉迷藏" title="捉迷藏">
                    </p>
                </div>
            </div>

            <div class="layui-form-item" style="margin-top: 25px">
                <label class="layui-form-label">是否退学：</label>
                <div class="layui-input-block">
                    <input type="checkbox" name="pDrop"  lay-skin="switch" lay-text="是|否" value="否">
                </div>
            </div>
        </div>
        <div class="layui-col-sm4">
            <div class="layui-form-item">
                <label class="layui-form-label">出生日期：</label>
                <div class="layui-input-block">
                    <input type="text" name="pDate" class="layui-input" id="pDate" placeholder="yyyy-MM-dd">
                </div>
            </div>
            <div class="layui-form-item" style="margin-top: 22px;">
                <label class="layui-form-label">退学时间：</label>
                <div class="layui-input-block">
                    <input type="text" name="dropDate" class="layui-input" id="dropDate" placeholder="yyyy-MM-dd">
                </div>
            </div>

            <div class="layui-form-item" style="margin-top: 22px">
                <label class="layui-form-label">家庭地址：</label>

                <div class="layui-input-block">
                    <input type="text" name="home" required  lay-verify="required" placeholder="请输入家庭地址" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item" style="margin-top: 22px">
                <label class="layui-form-label">备&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;注：</label>

                <div class="layui-input-block">
                    <input type="text" name="cRemarks" required  lay-verify="required" placeholder="请填写备注" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item" style="margin-top: 22px;">
                <label class="layui-form-label">状&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;态：</label>
                <div class="layui-input-block">
                    <input type="radio" name="state" value="良好" title="良好" checked>
                    <input type="radio" name="state" value="请假" title="请假" >
                </div>
            </div>
            <div class="layui-form-item" style="margin-top: 22px;">
                <label class="layui-form-label">上传图片：</label>
                <div class="layui-upload">
                    <input type="hidden" name="pimg" id="pimg">
                    <button type="button" class="layui-btn" id="test1">上传图片：</button>
                    <div class="layui-upload-list">
                        <img class="layui-upload-img" id="demo1">
                        <p id="demoText"></p>
                    </div>
                </div>
            </div>
            </div>

        </div>

    <div class="layui-row">
        <div class="layui-form-item">
            <label class="layui-form-label" style="width: 124px"> 监护人《--- 1 ---》</label>
            <div class="layui-input-block">
                <input type="checkbox" name=""  lay-skin="switch" lay-text="是|否" checked value="是">
            </div>
        </div>
    </div>
    <div class="layui-row"  style="margin-top: 10px;">

        <div class="layui-col-sm4">
            <div class="layui-form-item">
                <label class="layui-form-label">所属关系：</label>
                <div class="layui-input-block">
                    <select name="guanxi" id="guanxi">
                        <option value="爸爸">爸爸</option>
                        <option value="妈妈">妈妈</option>
                    </select>
                </div>
            </div>
        </div>
        <div class="layui-col-sm4">
            <div class="layui-form-item">
                <label class="layui-form-label">姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名：</label>

                <div class="layui-input-block">
                    <input type="text" name="pcName" required  lay-verify="required" placeholder="请输入姓名" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-col-sm4">
            <div class="layui-form-item">
                <label class="layui-form-label">联系方式：</label>

                <div class="layui-input-block">
                    <input type="text" name="pCmode" required  lay-verify="required" placeholder="请输入联系方式" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>
    </div>
    <div class="layui-row">
        <div class="layui-form-item">
            <label class="layui-form-label" style="width: 124px"> 监护人《--- 2 ---》</label>
            <div class="layui-input-block">
                <input type="checkbox" id="j" name="" lay-filter="jhr2" lay-skin="switch" lay-text="是|否" value="0">
            </div>
        </div>
    </div>
    <div class="layui-row" id="jhr2"  style="margin-top: 10px;display: none">

        <div class="layui-col-sm4">
            <div class="layui-form-item">
                <label class="layui-form-label">所属关系：</label>
                <div class="layui-input-block">
                    <select name="guanxi">
                        <option value="爸爸">爸爸</option>
                        <option value="妈妈">妈妈</option>
                    </select>
                </div>
            </div>
        </div>
        <div class="layui-col-sm4">
            <div class="layui-form-item">
                <label class="layui-form-label">姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名：</label>

                <div class="layui-input-block">
                    <input type="text" name="pcName" required  lay-verify="required" placeholder="请输入姓名" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-col-sm4">
            <div class="layui-form-item">
                <label class="layui-form-label">联系方式：</label>

                <div class="layui-input-block">
                    <input type="text" name="pCmode" required  lay-verify="required" placeholder="请输入联系方式" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>
    </div>
</div>

    <script>
        var form;
        var rstateCid;
        var q;
        layui.use(['upload','laydate','form'], function() {
            var $ = layui.jquery
                , upload = layui.upload;
            var laydate = layui.laydate;
            form = layui.form;
            //普通图片上传
            var uploadInst = upload.render({
                elem: '#test1'
                , url: 'http://localhost:9999/Child/childImg'
                , before: function (obj) {
                    //预读本地文件示例，不支持ie8
                    obj.preview(function (index, file, result) {
                        $('#demo1').attr('src', result); //图片链接（base64）
                        $("#pimg").val(file.name);
                    });
                }
            });

            laydate.render({
                elem: '#pDate'
            });
            laydate.render({
                elem: '#eDate'
            });
            laydate.render({
                elem: '#dropDate'
            });
            laydate.render({
                elem: '#scDate1'
            });
            laydate.render({
                elem: '#scDate2'
            });
         /*  var time3 = setInterval(function () {
               if ($("#j").val() != ""){
                  /!* form.on('click(jhr2)', function(data){
                       alert("sdf");
                       alert(data.value);
                   })*!/
                   clearInterval(time3);
               }
           },100)*/
            form.on('switch(jhr2)', function(data){
                if (data.value == 0){
                    $("#jhr2").slideDown(150)
                } else{
                    $("#jhr2").slideUp(150)
                }
                $(data.elem).attr('type', 'hidden').val(this.checked ? 1 : 0);
            })

            $(document).on('click','#scDate',function(){
                $.get('http://localhost:9999/Recruit/cNameAndcid',{scDate:$("#scDate1").val(),scDate2:$("#scDate2").val(),glId:$("#glId").val()},function (datas) {
                    $("#pNamea").empty();
                    var opt = $("<option value='-1'>请选择学生的姓名</option>").appendTo("#pNamea");
                    $.each(datas,function(){
                        var opt = $("<option title='"+this.cid+"'></option>").appendTo("#pNamea");
                        opt.text(this.cName).val(this.cName);
                    });
                    layui.form.render();
                })
            });

           form.on('select(manage)', function(data){
                if (data.value != -1){
                    $.get("http://localhost:9999/Child/childNum",{glId:$("#glId").val(),cmId: data.value},function(data){
                        setTimeout(function () {
                            if (data >= 5){
                                /*$("#gradeId").val(-1);*/
                                $("#cmId").val(-1);
                                layui.form.render();
                                layer.msg('对不起，该班级人员已满', {icon: 5,time: 1200});
                            }
                        },200)

                    });
                }

            })

            form.on('select(pName)', function(data){
                rstateCid =data.elem[data.elem.selectedIndex].title;
            })
                /*else{
                    $("#manage").empty();
                    $.get("http://localhost:9999/Manage/manageIndex",{glId:$("#glId").val()},function(data){
                        $.each(data.data,function(){
                            var opt = $("<option></option>").appendTo("#manage");
                            opt.text(this.cmName).val(this.cmId);
                        });
                        layui.form.render();
                    });
                }*/


            });

    </script>
</form>
</body>
</html>